import React, { Component } from 'react'

export default class App extends Component {
    a = 100
    myRef = React.createRef()

    // 如果把 ref 绑在组件标签上就可以获取组件的实例对象，可以用于组件通信
    render() {
        return (
            <div>
                {/* <input ref='myText' /> */}
                <input ref={this.myRef} />
                {/* refs上面的删除线表示这种写法要被遗弃了 */}
                <button onClick={() => {
                    // console.log('click1', this.refs.myText.value);

                    // 使用这种写法获取dom即使开启了严格模式也不会有报错
                    console.log('click', this.myRef.current.value);
                }}>add1</button>

                <button onClick={this.handleClick2}>add2</button>
            </div>
        )
    }

    // 不用箭头函数的话这里的this就指向undefined
    handleClick2 = () => {
        console.log('click2', this.myRef.current.value);
    }
}

